<script setup>
import router from "@/router";

let parent = defineProps({
  'items': {type: Array, required: true},
  'separator': {type: String, required: false, default: '/'},
  'backBtnLabel': {type: String, required: false, default: '返回'},
});

</script>

<template>
  <el-breadcrumb class="my-nav breadcrumb-nav" :separator="separator">
    <!--返回按钮-->
    <el-button class="back-btn" size="small" link icon="Back"
               @click="router.back(-1);">
      {{ backBtnLabel }}
    </el-button>
    <el-divider direction="vertical"/>
    <!--路径导航项-->
    <el-breadcrumb-item class="items"
                        v-for="(item ,i) in items" :key="item"
                        :to="item['url']">
      <!--type: 最后1个按钮为default，其余为info-->
      <el-button size="small" link
                 :icon="item['icon']"
                 :type="i === items.length - 1 ? 'info' : 'default'"
                 @click="item['fn']">
        {{ item['label'] }}
      </el-button>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<style scoped lang="scss">
.my-nav {

  * {
    float: left; // 左浮动
  }

  .el-button {
    font-size: 1rem; // 字号
    padding-top: 0; // 上内边距
  }
}
</style>